<template>
  <div class="">
    <p-modal
      title="新增教材库"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="closeModal"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-form-model-item ref="textbookNo" label="教材编码" prop="textbookNo">
          <p-input
            v-model="form.textbookNo"
          />
        </p-form-model-item>
        <p-form-model-item ref="textbookName" label="教材名称" prop="textbookName">
          <p-input
            v-model="form.textbookName"
          />
        </p-form-model-item>

        <p-form-model-item ref="skillId" label="教材归类" prop="skillId">

          <p-select v-model="form.skillId"  @change="skillChange">
            <p-select-option v-for="(item, index) in skillList" :key="index" :value="item.id + ''">
              {{item.skillName}}
            </p-select-option>
          </p-select>

        </p-form-model-item>

        <p-form-model-item v-if="state == 'add'" ref="version" label="版本" prop="version">
          <p-input
            disabled
            value = '1.0'
          />

        </p-form-model-item>

        <p-form-model-item ref="fileUrl" label="附件" prop="fileUrl">
            <p-upload
              name="file"
              :headers="headers"
              :multiple="false"
              :method="'post'"
              :data="{
                bucketName: 'mes',
                expireDate: 0
              }"
              accept=".rar, .7z, .zip"
              :action="actionUrl"
              @change="changeFile"
              v-if="isUpload"
            >
              <p-button> <p-icon type="upload" /> 上传</p-button>              
            </p-upload>

            <template v-else>
              <a :href='form.fileUrl' target="_blank">下载附件</a>
              <p-button @click="uploadReset" style="margin-left: 10px"> 重新上传</p-button>  
            </template>


        </p-form-model-item>
      </p-form-model>
    </p-modal>
  </div>
</template>

<script type="text/javascript">
import { postAction, getAction, deleteAction, api, putAction } from "@/api/manage";


export default {
  data() {
    return {
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 12
      },
      visible: false,
      confirmLoading: false,
      form: {
        textbookNo: '',
        textbookName: '',
        skillId: '',
        // version: '',
        fileUrl: '',
      },      
      rules: {
        textbookNo: [
          { required: true, message: '请输入教材编码', trigger: 'blur' },
        ],
        textbookName: [
          { required: true, message: '请输入教材名称', trigger: 'blur' },
        ],
        skillId: [
          { required: true, message: '请输选择材归类', trigger: 'blur' },
        ],
        // version: [
        //   { required: true, message: '请输入版本', trigger: 'blur' },
        // ],
      },
      isUpload: true,
      editId: '',
      skillList: [],
      actionUrl: api.test + "/poros-oss/file/upload",
      fileList: [],    
      url: {
        add: '/mes-manpower/mesHrTextbookBank',
        edit: '/mes-manpower/mesHrTextbookBank',
        skill: '/mes-manpower/mesHrSkillBank/getList'
      },
      state: 'add'
    };
  },
  mounted() {
  },
  methods: {

    getSkillList(){
      getAction(this.url.skill).then(res => {
        if(res.success) {
          this.skillList = res.data
        }
      })
    },

    skillChange(val){
      this.skillList.forEach( ele => {
        if(val == ele.id) {
          // this.form.workroomid = ele.fwpid
        }
      } )
    },

    // 重新上传
    uploadReset(){
      this.isUpload = true
    },

    showModal(record) {
      this.getSkillList()

      if(record) {
        this.state = 'edit'
        this.editId = record.id
        console.log(record);
        this.isUpload = false
        for (let key in this.form){
          this.form[key] = record[key]
        }
      } else {
        this.state = 'add'
      }

      this.visible = true;
    },
    handleOk(e) {
      this.confirmLoading = true;

      this.$refs.ruleForm.validate(valid => {
        if (valid) {

            const params = {
              ...this.form,
            }

            this.skillList.forEach(ele => {
              if(ele.id = params.skillId) {
                params.skillName= ele.skillName
              }
            })


            if( this.state == 'add'  ) {
              postAction(this.url.add, params).then( res => {
                if( res.success) {
                  this.$emit('handleSuccess')   
                  this.closeModal()     
                }else{
                  this.$message.error(res.msg)  
                }
                this.confirmLoading = false;  
              } )
            }

            if( this.state == 'edit' ) {
              params.id = this.editId
              putAction(this.url.edit, params).then( res => {
                if( res.success) {
                  this.$emit('handleSuccess')   
                  this.closeModal()     
                }else{
                  this.$message.error(res.msg)  
                }
                this.confirmLoading = false;  
              } )        
            }



        } else {
          this.confirmLoading = false;
          return false;
        }
      });


    },

    closeModal(e) {
      this.visible = false;
      Object.assign(this.form, this.$options.data().form);
      this.isUpload = true
      this.$refs.ruleForm.resetFields()
    },

    // 上传前
    beforeUpload(file, fileList) {
      return true
    },    

    changeFile(info) {

      
    if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
        
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
        console.log(info.file);
        
        this.form.fileUrl = info.file.response.data
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }   
    }

  },
  components: {},
};
</script>

<style lang="less" scoped>
</style>
